<!DOCTYPE html>
<html>
<head>
	<title>chat</title>
	<meta name="renderer" content="webkit">
  	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  	<script type="text/javascript" src="__STATIC__\js\jquery.js"></script>
	<script type="text/javascript" src="__STATIC__\layui\layui.js" charset="utf-8"></script>
	<link rel="stylesheet" href="__STATIC__\layui\css\layui.css" media="all">
</head>
<body>
	<div class="layui-container" style="margin-top: 100px;">
		<div>用户uid:{$Request.session.user_info.uid}</div>
		<div>用户名:{$Request.session.user_info.name}</div>
		<div class="site-demo-button layui-row">
			<div class="layui-col-xs6 content"  style="height: 500px;border: 2px solid gray; ">
				<div class="layui-col-xs12 replay" style="padding: 10px; margin-left:5%;">
					<span>zhangsan:</span>
					<span style="background-color: green;padding: 5px; border-radius:20px">132143</span>
				</div>
				<div class="layui-col-xs12 say" style="padding: 10px; margin-left:70%;">
					<span>zhangsan:</span>
					<span style="background-color: green;padding: 5px; border-radius:20px">132143</span>
				</div>
			</div>
		</div>
		<form class="layui-form" action="">
			<div class="site-demo-button layui-row">
				<div class="layui-col-xs12">
					<div class="layui-col-xs5">
				  		<input type="text" name="title" lay-verify="title"  class="layui-input">
				  	</div>
				  	<div class="layui-col-xs3">
				  		<button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
				  	</div>
		  		
		  	    </div>
		  	</div> 
	    </form>
	</div>
             

</body>
<script type="text/javascript">
	var from_uid = '{$Request.session.user_info.uid}';
	if(from_uid==1){
		var to_uid = 2;
 	}else{
 		var to_uid = 1;
 	}
	var Socket = new WebSocket("ws://127.0.0.1:8282");
	console.log(from_uid);

	//检测socket链接是否成功
	//console.log(Socket.readyState);
	//接受服务端消息
	Socket.onmessage = function(e){
		console.log(e);
		console.log(typeof(e.data));
		console.log(typeof(e.data));
		var data = JSON.parse(e.data);
		var id = data.id;
		var content = data.data;
		var type = data.type;
		if(type =='say'){
			$('.content').append('<div class="layui-col-xs12 replay" style="padding: 10px; margin-left:5%;"><span>游客:'+id+'</span><span style="background-color: green;padding: 5px; border-radius:20px">'+content+'</span></div>');
		}
		if(type =='bind'){
			var message ={'data':'绑定uid',"from_uid":from_uid,"type":"bind"};
			message = JSON.stringify(message);
			Socket.send(message);
		}
		console.log(data);
	}


	//发送消息
	$(document).on('click', '.layui-btn', function(event) {
		event.preventDefault();
		var msg = $("input[name='title']").val();
		if(!msg){
			msg = "无法言";
		}
		$('.content').append('<div class="layui-col-xs12 say" style="padding: 10px;margin-left:70%"><span style="background-color: green;padding: 5px; border-radius:20px">'+msg+'</span><span>:me</span></div>');
		var message ={"data":msg,"type":"say","from_uid":from_uid,"to_uid":to_uid};
		message = JSON.stringify(message);
		Socket.send(message);
	});

</script>
</html>